<template>
	<view>
		<view class="ha_setup_box" v-if="data !== undefined && data!== null && data .length>0">
			<view class="ha_setup">
				<view class="ha_setup_list ha_setup_tit">
					<text>卡类型</text>
					<text>交易类型</text>
					<text>费率</text>
					<text>收款方式</text>
					<text>分润(万分之几)</text>
				</view>
				<view class="ha_setup_list" v-for="(item,index) in data" :key="index">
					<text>{{item.card_text}}</text>
					<text>{{item.tran_text}}</text>
					<text>{{item.rate_text}}</text>
					<text>{{item.channel_text}}</text>
					<input type="text" v-if="item.max > 0" v-model="profit[index]"
						:placeholder="'输入分润(0-'+ item.max+')'" @input="judge(index)">
					<input type="text" v-else v-model="profit[index]" placeholder="输入分润">
				</view>
				<view class="order" @click="order">
					确定
				</view>
			</view>
		</view>
		<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				id: null,
				profit: []
			}
		},
		onLoad(e) {
			this.id = e.id
			this._list()
		},
		computed: {
			newArr() {
				let Arr = []
				let _this = this
				_this.data.map(function(item, index) {
					Arr[index] = item.profit
				})
				return Arr
			},
			card() {
				let Arr = []
				let _this = this
				_this.data.map(function(item, index) {
					Arr[index] = item.card
				})
				return Arr
			},
			tran() {
				let Arr = []
				let _this = this
				_this.data.map(function(item, index) {
					Arr[index] = item.tran
				})
				return Arr
			},
			rate() {
				let Arr = []
				let _this = this
				_this.data.map(function(item, index) {
					Arr[index] = item.rate
				})
				return Arr
			},
			channel() {
				let Arr = []
				let _this = this
				_this.data.map(function(item, index) {
					Arr[index] = item.channel
				})
				return Arr
			}
		},
		methods: {
			//判断输入数字大小
			judge(index) {
				if (parseInt(this.profit[index]) > parseInt(this.data[index].max)) {
					uni.showToast({
						title: '超过最大值',
						duration: 2000,
						icon: 'none',
					});
				}
			},
			//分润设置列表
			async _list() {
				uni.showLoading({
					title: '加载中'
				});
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp({
					url: 'setting/getProfitDetails',
					data: {
						id: this.id
					},
					header: {
						'token': userinfo.token
					},
				});
				if (res.code == 0) {
					uni.showToast({
						duration: 2000,
						title: res.msg,
						icon: 'none'
					})
					return false
				}
				uni.hideLoading();
				this.data = res.data
				this.profit = this.newArr
			},
			order() {
				let _this = this
				if (this.newArr.includes('')) {
					uni.showToast({
						duration: 2000,
						title: '分润不可以为空',
						icon: 'none'
					})
					return false
				}
				let _setup = true
				this.data.forEach((item, index) => { //js遍历数组
					if (parseInt(this.profit[index]) > parseInt(item.max)) {
						_setup = false
					}
				});
				if (_setup) {
					this.preserve()
				} else {
					uni.showToast({
						duration: 2000,
						title: '分润设置错误',
						icon: 'none'
					})
				}
			},
			async preserve() {
				uni.showLoading({
					title: '加载中'
				});
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp({
					url: 'setting/saveProfitDetails',
					data: {
						id: this.id,
						card: this.card,
						tran: this.tran,
						rate: this.rate,
						profit: this.newArr,
						channel: this.channel
					},
					header: {
						'token': userinfo.token
					},
				});
				uni.showToast({
					duration: 2000,
					title: res.msg,
					icon: 'none',
					success() {
						uni.navigateBack({})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ha_setup_box {
		padding: 30rpx;

		.ha_setup {
			.ha_setup_list {
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					display: block;
					text-align: start;
					font-size: 28rpx;
				}

				input {
					padding: 10rpx;
					border: 1px solid #eee;
					width: 23%;
					font-size: 24rpx;
					// box-sizing: border-box;
				}
			}

			.ha_setup_tit {
				border-bottom: #eee 1px solid;
				padding-bottom: 30rpx;
			}
		}
	}

	.order {
		padding: 20rpx;
		box-sizing: border-box;
		width: 80%;
		margin: 100rpx auto;
		border-radius: 50rpx;
		background-color: #1688f1;
		color: #fff;
		text-align: center;
	}
</style>